<template>
  <el-dialog
    ref="refDlg"
    title="新增"
    :visible.sync="dialogShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="clearForm"
    width="600px"
    @close="closeDialog"
  >
    <div>
      <el-form ref="refForm" :rules="formRules" :model="formData" size="mini" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="型号:" prop="model">
              <input-with-dialog
                v-model="model"
                :props="{label:'name',value:'code'}"
                :config="modelConfig"
                @change="modelChange"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="品类:" prop="categoryCode">
              <input-with-dialog
                v-model="category"
                :props="{label:'name',value:'code'}"
                :config="categoryConfig"
                @change="categoryChange"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="系列:" prop="seriesCode">
              {{ formData.seriesName }}
              <!-- <input-with-dialog
                v-model="series"
                :props="{label:'name',value:'code'}"
                :config="seriesConfig"
                @change="seriesChange"
              /> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品编码:" prop="code">
              <el-input v-model="formData.code" size="mini" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer">
      <el-button size="mini" @click="closeDialog">取消</el-button>
      <el-button size="mini" :loading="submiting" type="primary" @click="submitForm">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { saveMatchProduct } from '@/api/display/matchProduct'
export default {
  name: 'EditForm',
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    detailData: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      submiting: false,
      tableList: [],
      shop: [],
      zoneList: [],
      belongArea: [],
      zoneDivisionList: [],
      modelConfig: {
        title: '型号',
        interfacePath: `/select-service/api/v1/productModel/page`,
        setting: [
          {
            prop: 'code',
            title: '编码'
          },
          {
            prop: 'name',
            title: '名称'
          }
        ]
      },
      categoryConfig: {
        title: '品类',
        interfacePath: `/select-service/api/v1/productCategory/page`,
        setting: [
          {
            prop: 'code',
            title: '编码'
          },
          {
            prop: 'name',
            title: '名称'
          }
        ]
      },
      seriesConfig: {
        title: '系列',
        interfacePath: `/slm-admin/api/v1/displayAreaCategory/page`,
        setting: [
          {
            prop: 'code',
            title: '编码'
          },
          {
            prop: 'name',
            title: '名称'
          }
        ]
      },
      model: [],
      category: [],
      series: [],
      formData: {
        categoryCode: '',
        categoryName: '',
        code: '',
        id: '',
        model: '',
        name: '',
        seriesCode: '',
        seriesName: ''
      },
      formRules: {
        categoryCode: [{ required: true, message: '请选择', trigger: 'change' }],
        model: [{ required: true, message: '请选择', trigger: 'change' }],
        // seriesCode: [{ required: true, message: '请选择', trigger: 'change' }],
        code: [{ required: true, message: '请填写', trigger: 'blur' }]
      }
    }
  },

  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  async created() {

  },

  methods: {
    modelChange(data) {
      if (data && data.length > 0) {
        this.$set(this.formData, 'model', data[0].name)
        this.$set(this.formData, 'seriesName', data[0].saleSeriesName)
        this.$set(this.formData, 'seriesCode', data[0].saleSeriesCode)
      } else {
        this.$set(this.formData, 'model', '')
        this.$set(this.formData, 'seriesName', '')
        this.$set(this.formData, 'seriesCode', '')
      }
    },
    seriesChange(data) {
      if (data && data.length > 0) {
        this.$set(this.formData, 'seriesName', data[0].name)
        this.$set(this.formData, 'seriesCode', data[0].code)
      } else {
        this.$set(this.formData, 'seriesName', '')
        this.$set(this.formData, 'seriesCode', '')
      }
    },
    categoryChange(data) {
      if (data && data.length > 0) {
        this.$set(this.formData, 'categoryCode', data[0].code)
        this.$set(this.formData, 'categoryName', data[0].name)
      } else {
        this.$set(this.formData, 'categoryCode', '')
        this.$set(this.formData, 'categoryName', '')
      }
    },
    closeDialog() {
      this.dialogShow = false
      this.clearForm()
    },
    clearForm(done) {
      this.formData = {
        categoryCode: '',
        categoryName: '',
        code: '',
        id: '',
        model: '',
        name: '',
        seriesCode: '',
        seriesName: ''
      }
      this.$refs.refForm && this.$refs.refForm.clearValidate()
      done && done()
    },
    submitForm() {
      if (this.submiting) return
      this.$refs['refForm'].validate((valid) => {
        if (valid) {
          this.submiting = true
          saveMatchProduct(this.formData).then(res => {
            this.submiting = false
            this.closeDialog()
            this.$emit('success')
            this.$message.success('操作成功')
          }).catch(() => {
            this.submiting = false
          })
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
// 禁用颜色
/deep/.el-radio__input.is-disabled.is-checked .el-radio__inner{
 background-color: #9d9fa1;
}
/deep/.el-textarea.is-disabled .el-textarea__inner{
  color: #606266;
}
/deep/.el-input.is-disabled .el-input__inner {
  color: #606266;
}
</style>
